<!DOCTYPE html>
<html lang="en">
	<head>
	 <meta charset="utf-8">
	 <title>j1010_1_체크박스</title>
	 <style>
	 ul {list-style:none;}
	 </style>
	 <script src="js/jquery-2.1.1.min.js"></script>	
	 <script src="js/jquery-2.1.1.js"></script>
	 <script>
	 	$(document).ready(function(){
	 		//체크박스전체선택과 해제	
			$("#cbxAll").click(function(){
				$(".cb").prop('checked',this.checked);
			});			
			
			//라디오버튼선택값 확인
			
			$("#btn1").click(function(){
				var r=$(':radio[name="rdo"]:checked').val();
				alert(r);			
			});
			
			var result;
			//특정라디오버튼 선택
			$("#btn2").click(function(){
				$(':radio[name="rdo"]:radio[value="Y"]').attr("checked",true);
				result=$(':radio[name="rdo"]:radio[value="Y"]').val();
			});
			
			
			//모든라디오버튼 선택해제
			$("#btn3").click(function(){
				$(':radio[name="rdo"]').removeAttr("checked");
			});
			
			//라디오버튼 선택해제
			$("#btn4").click(function(){
				$(':radio[name="rdo"]:radio[value="'+result+'"]').removeAttr("checked");
			});
			
			
			//이름이 rdo인 라디오버튼 중 선택된 항목의 값을 가져오기
			$("#btn5").click(function(){
	alert($('input:radio[name="rdo"]:radio:checked').val());
			});
	 	});//end of $(document).ready()
	 </script>	
	</head>
	<body>
		<h1>입력양식</h1>
		<form id="frm1" name="frm1" action="ok.html" method="get">
		<input type="button" id="btn1" value="메일링서비스수락여부"/>
		<input type="button" id="btn2" value="선택"/>
		<input type="button" id="btn3" value="전체해제"/>
		<input type="button" id="btn4" value="해제"/>
		<input type="button" id="btn5" value="선택된 값가져오기"/>
		
		<br/>
		<input type="radio" name="rdo" id="rdo1" value="Y"/>
		<label for="rdo1">수락</label>
		<input type="radio" name="rdo" id="rdo2" value="N"/>
		<label for="rdo2">거부</label>	
			
			
			<hr/>
		
			<input type="checkbox" name="all" id="cbxAll"/>
			<label for="cbxAll">전체선택</label>
		<ul id="chboxArea">	
			<li><input type="checkbox" name="chbox" id="cbx0" class="cb" value="A"/>
			<label for="cbx1">항목1</label></li>
			<li><input type="checkbox" name="chbox" id="cbx1" class="cb" value="B"/>
			<label for="cbx1">항목2</label></li>
			<li><input type="checkbox" name="chbox" id="cbx2" class="cb" value="C"/>
			<label for="cbx1">항목3</label></li>
			<li><input type="checkbox" name="chbox" id="cbx3" class="cb" value="D"/>
			<label for="cbx1">항목4</label></li>
		</ul>	
			
		</form>	
	</body>
</html>













